<template>
<!-- 商品列表 -->
  <div id="Administration">
    <div id="managements">
      <!-- 搜索框 -->
      <div id="manage-top">
        <el-input placeholder="请输入商品名称" style="width:200px;" v-model="allPages.title"></el-input>
        <el-input placeholder="请输入商条形码" style="width:200px;" v-model="allPages.barcode"></el-input>
        <el-select v-model="allPages.status" clearable placeholder="请选择商品状态">
          <el-option
            style="height:46px"
            v-for="item in state"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
         <el-cascader v-model="ruleForm.category" :props="{ checkStrictly: true,value:'value',label:'label'}" :options="spuTitl" @change="list" ref="cascader" placeholder="请选择类目"></el-cascader>
        <button type="button" class="el-button el-button--primary" @click="management()">
          <i class="el-icon-search"></i>
          <span>查找</span>
        </button>
        <button type="button" class="el-button el-button--primary" @click="additions()"  v-Promise="'operation:goods:create'">
          <i class="el-icon-edit"></i>
          <span>添加</span>
        </button>
        <el-button type="warning" @click="delGroup()" :disabled="this.sels.length === 0">
          <i class="el-icon-delete"></i>批量删除
        </el-button>
        <!--disabled值动态显示，默认为true,当选中复选框后值为false-->
      </div>
      <div id="manage-bottom">
        <el-table
          border
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @row-click="handleCurrentChange"
          @selection-change="selsChange"
          ref="table"
          
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column type="expand" label="sku信息" width="42px">
            <template slot-scope="scope">
              <el-table :data="scope.row.skuList" style="width:100%" border>
                <el-table-column prop="barCode" label="商品条码"></el-table-column>
                <el-table-column prop="title" label="商品规格"></el-table-column>
                <el-table-column prop="stock" label="商品库存"></el-table-column>
                <el-table-column prop="freezeStock" label="商品冻结库存"></el-table-column>
                <el-table-column prop="originalPrice" label="原价"></el-table-column>
                <el-table-column prop="price" label="现价"></el-table-column>
                <el-table-column prop="vipPrice" label="VIP价格"></el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column label="商铺ID" prop="id"></el-table-column>
          <el-table-column label="名称" prop="title"></el-table-column>
          <el-table-column label="图片">
            <template slot-scope="scope">
              <img :src="scope.row.img" style="height:50px" />
            </template>
          </el-table-column>
          <el-table-column label="商品详细介绍" prop="detail">
            <template slot-scope="scope">
              <el-button size="mini" class="kohlrabiblue" @click="stateList(scope.row)">查看</el-button>
            </template>
          </el-table-column>
          <el-table-column label="类目ID" prop="categoryId"></el-table-column>
          <el-table-column label="邮费模板ID" prop="freightTemplateId"></el-table-column>
          <el-table-column label="销量" prop="sales"></el-table-column>
          <el-table-column label="单位" prop="unit"></el-table-column>
          <el-table-column label="是否在售" prop="status">
            <template slot-scope="scope">
              <el-tag>{{scope.row.status|statusTitls()}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="描述" prop="description"></el-table-column>
          <el-table-column label="操作" width="250px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="compile(scope.$index,scope.row)"
                class="kohlrabiblue"
                 v-Promise="'operation:goods:edit'"
              >编辑</el-button>
              <el-button
                size="mini"
                @click="putaway(scope.$index,scope.row)"
                class="kohlrabiblue"
              >{{scope.row.status|statusreverse()}}</el-button>
              <el-button size="mini" type="danger" @click="deletes(scope.$index,scope.row)" v-Promise="'operation:goods:delete'">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 查看 -->
      <el-dialog :title="titleName" :visible.sync="FormVisible">
        <div v-html="picture">{{picture}}</div>
      </el-dialog>
      <!-- 分页 -->
      <Paging @handle="handles" :allPages="allPages"></Paging>
    </div>
  </div>
</template>
<script>
import Upsert from "./Upsert.vue";
import list from "@/api/list.js";
import Paging from "../../components/Paging"; //分页
import qs from "qs";
export default {
  components: {
    Paging
  },
  data() {
    return {
      state: [
        {
          value: 0,
          label: "下架"
        },
        {
          value: 1,
          label: "正常"
        }
      ],
      sels: [], //选中的值显示
      picture: [], //图片
      tableData: [], //列表数组
      spuTitl: [],
      change: "",
      dialogFormVisible: false,
      FormVisible: false,
      titleNames: "", //二次是否添加还是编辑
      allPages: {
        currentPage: 1, //当前的默认的页数
        eachpage: 20, //默认的页码
        total: 0, //初始值共数据条
        totalPageNo: 1,
        // 查询
        title: "",
        barcode: "",
        status: "",
        categoryId: "",
        category:''
      },
      ruleForm: {
        spuId: "",
        categoryId: "",
        id: ""
      },
      fors: [],
      titleName: ""
    };
  },
  filters: {
    statusTitls: function(value) {
      return value == 0 ? "未售" : "在售";
    },
    statusreverse: function(value) {
      return value == 0 ? "上架" : "下架";
    }
  },
  methods: {
    selsChange(sels) {
      this.sels = sels;
    },
    delGroup() {
      var ids = [];
      this.sels.map(item => {
        ids.push(item.id);
      }); //获取所有选中行的id组成的字符串，以逗号分隔
      console.log(ids);
      list.batch(ids).then(function(res) {
        if ((res.data.errno = 200)) {
          _this.$information.success("删除成功");
        }
      });
    },
    handleCurrentChange(row, event, column) {
      this.$refs.table.toggleRowSelection(row);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //编辑
    compile(index, row) {
      console.log(row.id);
      (this.ruleForm.id = row.id), console.log(this.ruleForm);
      (this.FormVisible = true), this.$router.push("/commodity/upsert");
    },
    // 添加
    additions() {
      (this.FormVisible = true), this.$router.push("/commodity/upsert");
    },

    // 分页负值
    handles(val) {
      this.allPages = val;
      this.management();
    },
    list(value){
        this.allPages.category=value[value.length-1]  //获取级联id  
        console.log(this.allPages.category)
     },
      // sup树
    supshu() {
        let _this=this;
      list.supTree().then(res => {
        _this.spuTitl =res.data.data;
      });
    },
    // 运费数据列表
    management() {
      let _this = this;
      list.list(_this.allPages).then(function(res) {
        console.log(res);
        _this.tableData = res.data.data.items;
        // 分页
        _this.allPages.currentPage = res.data.data.pageNo;
        _this.allPages.eachpage = res.data.data.pageSize;
        _this.allPages.total = res.data.data.total;
        _this.allPages.totalPageNo = res.data.data.totalPageNo;
      });
    },
    // 销售
    putaway(index, row) {
      let _this = this;
      let data = {
        spuId: row.id,
        status: row.status
      };
      list.market(data).then(function(res) {
        if (row.status === 1) {
          row.status = 0;
        } else {
          row.status = 1;
        }
        for (const i in _this.tableData) {
          if (_this.tableData[i].id === row.id) {
            _this.tableData[i].status = row.status;
          }
        }
      });
    },
    // 删 除
    deletes(index, row) {
      let _this=this
      _this
        .$confirm("此操作将永久删除, 是否继续?","提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          _this.$information.success("删除成功");
          let data = {
            spuId: row.id
          };
          list.deletes(data).then(function(res) {
            _this.tableData.splice(index, 1);
          });
        });
    },
    // 查看详情
    stateList(row) {
      let that = this;
      (that.FormVisible = true), (that.titleName = "详情");
      let data = {
        spuId: row.id
      };
      list.particulars(data).then(function(res) {
        that.picture = res.data.data.detail;
      });
    }
  },
  created() {
    this.management();
    this.supshu();
  }
  //  watch:{
  //   //重制
  //   dialogFormVisible(){
  //     this.$nextTick(() => {
  //     this.$refs.ruleForm.clearValidate();
  //     })
  //   }
  // }
};
</script>

<style lang="less" scoped>
#Administration {
  width: 100%;
  height: 100%;
}
#Administration ::-webkit-scrollbar {
  width: 0px !important;
}
#managements {
  width: 90vw;
  height: 80vh;
  margin: auto;
}
/* 表格样式*/
#block {
  margin-top: 30px;
}
.kohlrabiblue {
  background: #66b1ff;
  color: #ffffff;
}
.el-table--enable-row-transition/deep/.el-table__body td {
  text-align: center;
}
.el-table/deep/th.is-sortable {
  cursor: pointer;
  text-align: center;
}
.el-table td,
.el-table/deep/th.is-leaf {
  text-align: center;
}
.el-table/deep/.cell {
  text-align: center !important;
  font-size: 12px;
}
/* 弹出框*/
.loginRight {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 0px 8px 8px 0px;
}
.login-right {
  width: 90%;
  margin: auto;
}
/*  */
/deep/.el-dialog {
  width: 900px !important;
}
/deep/.el-form-item__content {
  width: 650px !important;
}
.el-form-item .el-form-item--feedback .is-required/deep/.el-checkbox-group {
  width: 4px !important;
  display: inline;
}
.block {
  margin: 20px 0px;
}
// 
#manage-top{
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px; 
}
button{
  margin: 0px !important;
}

</style>